<template>
    <div class="main_box">
        <el-row class="boxRow">
            <el-col class="boxMain">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(1)" @click="setDeploy(1)">已配置</div>
                    <div class="deploy" v-else>
                        <el-button type="primary" size="small" v-if="!isInitial" @click="setDeploy(1)">配 置</el-button>
                    </div>
                </div>
                <div id="line-one" class="my_chart"></div>
            </el-col>
            <el-col class="boxMain">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(2)" @click="setDeploy(2)">已配置</div>
                    <div class="deploy" v-else>
                        <el-button type="primary" size="small" v-if="!isInitial" @click="setDeploy(2)">配 置</el-button>
                    </div>
                </div>
                <div id="line-second" class="my_chart"></div>
            </el-col>
            <el-col class="boxMain lastLine">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(3)" @click="setDeploy(3)">已配置</div>
                    <div class="deploy" v-else>
                        <el-button type="primary" size="small" v-if="!isInitial" @click="setDeploy(3)">配 置</el-button>
                    </div>
                </div>
                <div id="line-third" class="my_chart"></div>
            </el-col>
        </el-row>
        <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import charts from './chart.js'
import deployDialog from '@/views/newSystem/settingManagement/projectView/dialog/deployDialog.vue'
export default {
    components: {
        deployDialog,
    },
    props: {
        isSet: { //是否可配置数据
            type: Boolean,
            default: () => false
        },
        isInitial: {
            // 是否数据看板初始化
            type: Boolean,
            default: () => false
        },
        configured: {
            // 已配置
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            showNum: 0,
            setNum: 0,
        }
    },
    created() {
    },
    mounted() {
        this.getOne()
        this.getSecond()
        this.getThird()
    },
    methods: {
        getOne() {
            charts.lineoneEchart()
        },
        getSecond() {
            charts.linesecondEchart()
        },
        getThird() {
            charts.linethirdEchart()
        },
        setDeploy(num) {
            this.setNum = num
            this.$refs.deployDialog.isView = false
            this.$refs.deployDialog.dialogVisible = true
        },
        refresh(id) {
            this.configured.push(this.setNum)
        }
    }
}
</script>

<style lang="scss" scoped>
.main_box {
    height: 39%;
}

.boxRow {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 20px 0;
}

.boxMain {
    border-radius: 4px;
    margin-right: 20px;
    background-color: #fff;
    width: calc((100% - 40px)/3);
    height: 100%;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 8px 0;
    position: relative;
}

.lastLine {
    margin-right: 0 !important;
}

.my_chart {
    // height: 260px;
    // width: 100%;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
}

.tab {
    display: flex;
    align-items: center;
    width: 100%;
}

.tab_title {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.text-warning {
    color: #ff9933;
    text-align: center;
    margin-top: 10px;
}

.box_info {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px;

    span {
        color: #9a9a9a;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .tab_title {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 10px;
        margin-right: 10px;
    }
}

.text {
    color: #666666;
}

.deploy {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
    opacity: 0.9;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.configured {
    text-align: right;
    margin-right: 8px;
    color: #3276ff;
    cursor: pointer;
}
</style>